﻿using System;
using System.Html.DOM;

namespace RexToy.UI.Controls
{
    public class TextArea : Control
    {
        private string[] events = new string[] { "onblur", "ontextchange" };

        private string __text;
        public string Text
        {
            get
            {
                var dom = this.__domNode.SearchByName("input");
                var input = dom._element as InputText;
                this.__text = input.Value;
                return this.__text;
            }
            set
            {
                this.__text = value;
                var dom = this.__domNode.SearchByName("input");
                var input = dom._element as InputText;
                input.Value = value;

                if (this.__enable)
                {
                    this.onkeyup();
                }
            }
        }

        private bool __enable;
        public bool Enable
        {
            get { return __enable; }
            set
            {
                if (value)
                {
                    this.__domNode.AppendClass("ui-disabled");
                }
                else
                {
                    this.__domNode.AppendClass("ui-disabled");
                }

                this.__enable = value;
                this.Readonly = !value;
            }
        }

        private bool __readonly;
        public bool Readonly
        {
            get
            {
                return __readonly;
            }
            set
            {
                this.__readonly = value;
                var dom = this.__domNode.SearchByName("input");

                if (value)
                    dom.SetAttribute("readOnly", true);
                else
                    dom.SetAttribute("readOnly", null);
            }
        }

        public override Palette Palette
        {
            get
            {
                return this.__palette;
            }
            set
            {
                var dom = this.__domNode.SearchByName("input");
                var template = "ui-body-{0}";
                dom.ReplaceClass(StringExt.Format(template, this.__palette), StringExt.Format(template, value));
                this.__palette = value;
            }
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="text">the text value in the box</param>
        /// <param name="hint">the label before the textbox</param>
        /// <param name="placeholder">if no text, will display this</param>
        public TextArea(string text, string hint, string placeholder)
        {
            this.__selectable = true;
            this.__text = text ?? String.Empty;
            this.__palette = Palette.C;
            this.__domNode = RexToy.UI.Controls.DomNode.Create(new DomNodeCreateOptions()
            {
                tag = Tag.Div,
                className = "ui-field-contain ui-body ui-br",
                items = new DomNodeCreateOptions[] {
                    new DomNodeCreateOptions(){
                        tag= Tag.Label,
                        hashName= "hint",
                        className= "ui-input-text",
                        innerHTML= hint
                    },
                    new DomNodeCreateOptions(){
                        tag= Tag.TextArea,
                        hashName= "input",
                        className= "ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c",
                        placeholder= placeholder ?? "Input Value",
                        value= this.__text
                    }
                }
            });
            var input = this.__domNode.SearchByName("input");
            input.AttachEvent(DomEvent.OnKeyUp, new Action(this.onkeyup).Bind(this))
                .AttachEvent(DomEvent.OnBlur, new Action(this.onblur).Bind(this));
        }

        private void onkeyup()
        {
            this.__FireEvent("ontextchange");
        }

        private void onblur()
        {
            this.__FireEvent("onblur");
        }
    }
}
